<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东商城-详情页面</title>
    <link rel="stylesheet" href="libs/bootstrap-3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/jd.css">
</head>
<body>
<!--头部-->
<div class="jd-head">
    <div class="container jd-breadnav">
        <ol class="breadcrumb">
            <li><a href="#">我的订单</a></li>
            <li><a href="#">我的京东</a></li>
            <li><a href="#">京东会员</a></li>
            <li><a href="#">企业采购</a></li>
            <li><a href="#">客户服务</a></li>
            <li><a href="#">网站导航</a></li>
            <li><a href="#">手机京东</a></li>
        </ol>
    </div>
</div>
<!--搜索-->
<div class="container jd-search-panel">
    <div class="row">
        <div class="col-md-2">
            <img src="images/logo.png" />
        </div>
        <div class="col-md-6">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="笔记本">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button">搜索</button>
                </span>
            </div>
            <div class="jd-breadnav">
                <ol class="breadcrumb">
                    <li><a href="#">笔记本电脑</a></li>
                    <li><a href="#">笔记本子</a></li>
                    <li><a href="#">笔记本文具</a></li>
                    <li><a href="#">小米笔记本</a></li>
                    <li><a href="#">笔记本电脑 京东自营</a></li>
                    <li><a href="#">苹果笔记本</a></li>
                </ol>
            </div>
        </div>
        <!--<div class="col-md-3">-->
        <!--<span class="dropdown jd-mygwc">-->
        <!--<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">购物车<span class="caret"></span></a>-->
        <!--<ul class="dropdown-menu">-->
        <!--<li><a href="#">Action</a></li>-->
        <!--<li><a href="#">Another action</a></li>-->
        <!--<li><a href="#">Something else here</a></li>-->
        <!--<li role="separator" class="divider"></li>-->
        <!--<li><a href="#">Separated link</a></li>-->
        <!--<li role="separator" class="divider"></li>-->
        <!--<li><a href="#">One more separated link</a></li>-->
        <!--</ul>-->
        <!--</span>-->
        <!--</div>-->
    </div>
</div>
<!--导航-->
<div class="jd-detail-nav">
    <div class="container">
        <ul id="nav" class="nav nav-pills jd-detail-nav-f">
            <li>
                <a href="#">首页</a>
            </li>
            <li>
                <a href="#">全部产品</a>
                <ul class="nav jd-detail-nav-s">
                    <li><a href="">笔记本</a></li>
                    <li><a href="">台式机</a></li>
                </ul>
            </li>
            <li>
                <a href="#">暗影精灵</a>
                <ul class="nav jd-detail-nav-s">
                    <li><a href="">笔记本</a></li>
                    <li><a href="">台式机</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<!--商品信息-->
<div class="container jd-buy-panel">
    <div class="row">
        <div class="col-lg-3 jd-buy-left">
            <img src="images/2.jpg" />
        </div>
        <div class="col-lg-8 jd-buy-right">
            <h3>惠普（HP）暗影精灵4代 15.6英寸游戏笔记本电脑（i5-8300H 8G 128G+1TB GTX1050Ti 4G独显 144Hz IPS FHD）</h3>
            <p class="jd-buy-intro">【11.6号！6499限量抢】微边框游戏本搭载8代处理器</p>
            <div class="jd-detail-price-panel">
                <div>
                    <span class="jd-detail-price-t">京东价</span>
                    <span class="jd-detail-price-m">￥4499.00</span>
                </div>
            </div>
            <div class="jd-buy-add">
                <div class="jd-buy-num">
                    <div class="input-group">
                        <span class="input-group-addon" onclick="plus(-1);">-</span>
                        <input id="num" type="number" class="form-control" value="1">
                        <span class="input-group-addon" onclick="plus(1)">+</span>
                    </div>
                </div>
                <button type="button" class="btn btn-danger">加入购物车</button>
            </div>
        </div>
    </div>
</div>
<!--商品介绍-->
<div class="jd-nav jd-nav-list">
    <ul class="container nav nav-pills">
        <li class="jd-nav-allbtn"><a href="#">商品介绍</a></li>
        <li><a href="#">规格与包装</a></li>
        <li><a href="#">售后保障</a></li>
        <li><a href="#">商品评价</a></li>
    </ul>
</div>
<!--底部-->
<div class="jd-footer">
    <div class="text-center jd-footer-link">
        <a href="#">关于我们</a><span>|</span>
        <a href="#">联系我们</a><span>|</span>
        <a href="#">联系客服</a><span>|</span>
        <a href="#">合作招商</a><span>|</span>
        <a href="#">商家帮助</a><span>|</span>
        <a href="#">营销中心</a>
    </div>
</div>
<script src="libs/jquery-3.3.1.js"></script>
<script src="libs/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function () {
        $("#nav li").mouseover(function () {
            $(this).find("ul").css("display","block");
        })
        $("#nav li").mouseout(function () {
            $(this).find("ul").css("display","none");
        })
    })
    //    购物车数量
    function plus(n){
        num=$("#num").val();
        num=parseInt(num);
        console.log(num)
        if(n==1){
            num=num+1
        }else if(n==-1){
            num=num==1?1:num-1
        }
        $("#num").val(num);
    }
</script>
</body>
</html>